<!DOCTYPE html>
<html>

	<head>
		<!-- 声明文档使用的字符编码 -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!-- 为移动设备添加 viewport -->
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
		<meta name="HandheldFriendly" content="true">
		<!-- 优先使用 IE 最新版本和 Chrome -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>黑图视界</title>
		<meta name="keywords" content="黑图视界">
		<meta name="description" content="黑图视界">
		<script type="text/javascript" src="../js/setFontSize.js"></script>
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
	</head>

	<body>
		<div id="app">
			<main class="pab150">
				<section class="join picBg">
					<div class="container">
						<div class="radius20 whiteBg pad30 pab80">
							<label class="item clearfix">
								<div>账号名</div>
								<input type="text" style="width: 350px" class="formInput" v-model="registerManager.managername" placeholder="账号由6~16位英文字母、数字或下划线组成"/>
							</label>
							<label class="item clearfix">
								<div >密码</div>
								<input type="password" style="width: 350px" class="formInput" v-model="registerManager.password" placeholder="密码由8~16位英文字母、数字或下划线组成"/>
							</label>
							<label class="item clearfix">
								<div class="name">确认密码</div>
								<input type="password" class="formInput" v-model="checkPsw" />
							</label>
							<label class="item clearfix">
								<div class="name">手机号码</div>
								<input type="text" class="formInput" v-model="registerManager.phonenum"/>
							</label>
							<div class="item clearfix">
								<div class="name">校验码</div>
								<input type="text" class="formInput" id="mobile" value="" placeholder="请联系管理员获取" v-model="registerManager.introduce"/>
								<div class="getMobile">生成校验码</div>
							</div>

							<div class="subBtn" id="submitBtn" @click="regster">确认</div>
						</div>
					</div>
				</section>
			</main>
		</div>

		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/swiper.min.js"></script>
		<script type="text/javascript" src="../js/layer/layer.js" ></script>
		<script type="text/javascript" src="../js/rolldate.js" ></script>
		<script type="text/javascript" src="../js/main.js"></script>
		<script type="text/javascript" src="/js/vue.js"></script>
		<script type="text/javascript" src="/js/axios.js"></script>
	</body>
<script>
	const  app = new Vue({
		el:"#app",
		data:{
			registerManager:{
				managername:"",
				password:"",
				phonenum:"",
				introduce:""
			},
			checkPsw:""
		},
		methods:{
			regster(){
				let nameReg = /^[0-9a-zA-Z_]{6,16}$/
				let pswReg = /^[0-9a-zA-Z_]{8,16}$/
				let phoneReg = /^1[0-9]{10}$/
				if (this.registerManager.managername==="") layer.msg("请输入账号")
				else if (!nameReg.test(this.registerManager.managername)) layer.msg("账号格式不正确")
				else if (this.registerManager.password==="") layer.msg("请输入密码")
				else if (!pswReg.test(this.registerManager.password)) layer.msg("密码格式不正确")
				else if (this.checkPsw==="") layer.msg("请输入确认密码")
				else if (this.registerManager.password!==this.checkPsw) layer.msg("两次输入密码不一致")
				else if (this.registerManager.phonenum==="") layer.msg("请输入电话号码")
				else if (!phoneReg.test(this.registerManager.phonenum)) layer.msg("手机号码格式不正确")
				else if (this.registerManager.introduce==="") layer.msg("请输入校验码")
				else{
					axios.post("/manage/register",{
							registerManager:app.registerManager,
					}).then(function (res) {
						if (res.data==="注册成功!") location.href="/managerclient/login.html"
						layer.msg(res.data);
					})
				}
			}
		}
	})
</script>

</html>